import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:squat_easy/generated/assets.dart';
import 'package:squat_easy/se_coin_shop/se_coin_shop_bean.dart';
import 'package:squat_easy/se_coin_shop/se_coin_shop_logic.dart';
import 'package:squat_easy/se_main/se_mine/se_mine_base_page.dart';
import 'package:squat_easy/se_service/se_user_service.dart';
import 'package:ylm_ui_kit/ylm_ui_kit.dart';

class SeCoinShopPage extends GetView<SeCoinShopLogic> {
  const SeCoinShopPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SeMineBasePage(
      title: const ImageWidget.asset(Assets.pngTitleCoinShop, width: 144),
      child: GetBuilder<SeCoinShopLogic>(
        init: SeCoinShopLogic(),
        builder: (logic) {
          return SingleChildScrollView(
            padding: EdgeInsets.fromLTRB(23.w, 23.w, 23.w, 23.w),
            child: Column(
              children: [
                _buildTop().padding(top: 40.w),
                _buildItemWrap().padding(top: 45.w),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildTop() {
    return ButtonWidget(
      height: 102.w,
      alignment: Alignment.center,
      borderWidth: 1.w,
      borderColor: Colors.black,
      borderRadius: 22.w,
      gradient: const LinearGradient(
        colors: [Color(0XFFE3F6F2), Color(0XFFFEFAF1)],
        begin: Alignment(0.6, 1),
        end: Alignment(0.6, 0.3),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconWidget.image(Assets.pngCoin, width: 68.w, height: 68.w).expanded(),
          Container(
            width: 1.w,
            height: 48.w,
            color: Colors.black,
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const TextWidget.oneLine(text: 'My Coins', fontSize: 16),
              TextWidget.oneLine(
                text: (SeUserService.instance.notifierOfMineInfo.value.availableCoins ?? 0).toString().toMoney,
                fontSize: 26,
              ).paddingTop(5.w),
            ],
          ).center().expanded(),
        ],
      ),
    );
  }

  Widget _buildItemWrap() {
    return LayoutBuilder(
      builder: (context, constraints) {
        double width = constraints.maxWidth;
        double spacing = 15.w;
        double itemWidth = ((width - spacing) / 2).floorToDouble();
        return Wrap(
          spacing: spacing,
          runSpacing: 32.w,
          children: List.generate(
            controller.goodsList.length,
            (index) => SeRechargeItem(
              controller.goodsList[index],
              itemWidth,
              onTap: () => controller.createOrder(controller.goodsList[index]),
            ),
          ).toList(),
        );
      },
    );
  }
}

class SeRechargeItem extends StatelessWidget {
  SeRechargeItem(this.bean, this.width, {super.key, this.onTap});

  final double width;
  late final bool isHot = bean.tags.equals('Hot');
  final SeGoodsBean bean;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return ButtonWidget(
      hasInkWell: false,
      onTap: onTap,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            width: width,
            decoration: CommonDecoration.getShapeDecoration(
              bg: Colors.black,
              radius: 11.w,
            ),
            child: AspectRatio(
              aspectRatio: 1.34,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    children: [
                      _buildCoin().paddingLeft(28.w),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          _buildCoinNum(),
                          _buildDiscount().padding(top: 6.w),
                        ],
                      ).paddingLeft(15.w).flexible(),
                    ],
                  ),
                  Row(
                    children: [
                      _buildDiscountPrice().paddingLeft(28.w),
                      if (bean.isPromotion ?? false) _buildPrice().paddingLeft(19.w),
                    ],
                  ).paddingTop(18.w),
                ],
              ).center(),
            ),
          ),
          if (bean.tags.notEmpty) _buildTag().positioned(right: 0, top: -15.w),
        ],
      ),
    );
  }

  Widget _buildCoin() => IconWidget.image(Assets.pngCoin, width: 42.w, height: 42.w);

  Widget _buildCoinNum() =>
      TextWidget.oneLine(text: (bean.exchangeCoin ?? 0).toString(), fontSize: 18, color: Colors.white);

  Widget _buildDiscount() {
    double discount = bean.discount ?? 0;
    if (discount <= 0) return const SizedBox();

    String num = (discount * 100).toString().toMoney;

    return TextWidget.oneLine(text: '$num% off', fontSize: 8, color: '#E3EE71'.toColor);
  }

  Widget _buildDiscountPrice() => TextWidget.oneLine(text: '\$${bean.price ?? 0}', fontSize: 15, color: Colors.white);

  Widget _buildPrice() => TextWidget.oneLine(
        text: '\$${bean.originalPrice ?? 0}',
        fontSize: 11,
        color: Colors.white.withOpacity(0.5),
      );

  Widget _buildTag() {
    if (isHot) {
      return ImageWidget.asset(Assets.pngCoinHot, width: 50.w, height: 31.w);
    }
    return Container(
      height: 31.w,
      alignment: Alignment.center,
      padding: EdgeInsets.only(bottom: 8.w, left: 5.w, right: 5.w),
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(Assets.pngCoinTagBg),
          fit: BoxFit.fill,
        ),
      ),
      child: _buildTagTitle(),
    );
  }

  Widget _buildTagTitle() => TextWidget.oneLine(text: bean.tags, fontSize: 10, color: Colors.black);
}
